<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
  >
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="filters"
        :model="filters"
        label-position="right"
      >
        <el-row>
          <el-col :span="22">
            <el-form-item label="员工姓名:">{{
              filters.userName
            }}</el-form-item>
            <el-form-item label="所属门店:">{{
              filters.storeName
            }}</el-form-item>
            <el-form-item label="用户名:">{{ filters.account }}</el-form-item>
            <el-form-item label="员工职位:">{{
              filters.roleName
            }}</el-form-item>
            <el-form-item label="联系电话:">{{ filters.phone }}</el-form-item>
            <el-form-item label="性别:">{{ filters.genderCst }}</el-form-item>
          </el-col>
          <el-col
            :span="2"
            class="buttonStyle"
          >
            <el-button
              type="primary"
              @click="saveUpdate"
            >保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>

    <template #contentPanel>
      <el-row>
        <el-col :span="20">
          <el-tree
            :data="menuList"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            :props="defaultProps"
            :check-strictly="false"
          >
            <div slot-scope="{ node, data }">
              <span>{{ data.name }}</span>
              <!-- <span>{{ 'router:' + data.menuPath }}</span> -->
              <!-- <span>{{ 'hidden:' + data.viewable }}</span> -->
              <!-- <span><i class="el-icon-check"></i></span> -->
            </div>
          </el-tree>
        </el-col>
        <el-col :span="4">
          <el-button
            type="success"
            @click="allAuthorization"
            v-permission="'user:savePre'"
          >一键授权</el-button>
          <el-button
            type="danger"
            @click="restCheck"
          >重置</el-button>
        </el-col>
      </el-row>
    </template>
  </base-layout>
</template>

<script>
import { menuList } from '@/api/after-sale/systemManage/role'
import baseMixin from '@/mixins/base'
import ElRow from 'element-ui/packages/row/src/row'
import ElCol from 'element-ui/packages/col/src/col'
import { userMenuAuth } from '@/api/after-sale/systemManage/authority'

export default {
  components: { ElCol, ElRow },
  mixins: [baseMixin({})],
  data () {
    return {
      menuListDemo: [],
      dict: {},
      menuList: [],
      filters: {},
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      defaultSetCheckedKeys: [],
      noFatherId: [],
    }
  },
  methods: {
    forMeuntList (list) {
      if (Array.isArray(list) && list.length > 0) {
        list.map(item => {
          this.defaultSetCheckedKeys.push(item.id);
          if (item.children) {
            this.forMeuntList(item.children)
          }
        })
      } else {
        return
      }
    },
    restCheck () {
      this.$refs.tree.setCheckedKeys([])
    },
    //一键授权
    allAuthorization () {
      this.forMeuntList(this.menuList)
      this.$refs.tree.setCheckedKeys(this.defaultSetCheckedKeys)
    },
    async menuLists () {
      const { data } = await menuList()
      this.menuList = data
    },
    async saveUpdate () {
      /** 保存*/
      this.filters.menuIds = this.$refs.tree.getCheckedNodes(false, true).map(item => {
        return item.id
      })
      if (this.filters.id) {
        const { success } = await userMenuAuth({
          menuIds: this.filters.menuIds,
          userId: this.filters.id,
        })
        if (success) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.$router.push({ path: '/systemManage/authority' })
        } else {
          this.$message.error('操作失败')
        }
      }
    },
  },
  async mounted () {
    await this.menuLists()
    let row = JSON.parse(this.$route.query.row)
    if (row && Object.keys(row).length > 0) {
      this.filters = row
    }
    this.filtersFaterId(this.menuList)
    let roleMenuList = [...row.authInfoIds.split(','), ...row.roleMenuIds.split(',')];
    let meunts = roleMenuList.filter(item => {
      if (this.noFatherId.includes(Number(item))) {
        return item
      }
    })
    this.$refs.tree.setCheckedKeys(meunts)
  },
}
</script>

<style lang="scss" scoped>
.el-table .delete-row {
  background: #f5f7fa;
  color: #ccc !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.buttonStyle {
  text-align: center;
}
</style>
